<template>
   <div id="tab">
   <el-tabs v-model="activeName" class="tabs" @tab-click="handleClick">
      <el-tab-pane label="歌曲" name="first">
         <SearchSongs></SearchSongs>
      </el-tab-pane>
      <el-tab-pane label="歌单" name="second">
         <SearchSongList></SearchSongList>
      </el-tab-pane>
   </el-tabs>
   </div>
</template>

<script setup>
import {ref} from 'vue'
import SearchSongList from '../components/search/SearchSongList.vue';
import SearchSongs from '../components/search/SearchSongs.vue';

const activeName = ref('first');

const handleClick = () => {
   if (activeName.value == 'first') {
      activeName.value == 'second'
   } else {
      activeName.value == 'first'
   }
}
</script>

<style scoped>
.tabs {
   width: 90%;
   margin: auto;
   min-width: 500px;
}
#tab{
   min-height: 500px;
}
</style>
